<template>
	<!-- 异业招商 -->
	<view class="content display  width_750 displayColumn">

		<u-navbar @rightClick="rightClick" bgColor="transparent" :autoBack="true">
			<template slot="left">
				<uni-icons type="left" color="#FFFFFF;" size="23" @click="back"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title"></text>
			</template>
		</u-navbar>
		<view class="fn_one display width_750  displayColumn">
			<view class="fn_one_one display " style="margin-top: 174rpx;">
				<image class="img1 M-L30" :src="imgsList.img1" mode=""></image>
			</view>
			<view class="fn_one_two display M-30">
				<span class="fn_tttx1 M-L30">智慧领先</span>
				<span class="fn_tttx1" style="margin-left: 42rpx;">洁净随行</span>
			</view>
			<!-- 内容 -->
			<view class="fn_contents1   width-100 all_item">
				<view class="fn_items   width_699 ">
					<view class="fn_items_card display  width_699  displayColumn ">
						<view class="fn_items_card_one display  width_699">
							<view class="left display " :class="{fn_left1:selectIndex==0,fn_left2:selectIndex!=0}"
								@click="selectIndex=0">
								<view class="display width-100 fn_span_1  displayColumn all_item">
									<span class="fontSize font_comm fn_bg1"
										:style="{'font-weight':selectIndex==0 ? '600' :'400' ,color:selectIndex==0 ?'#000' :' #72778A'}">公司介绍</span>
									<view class="fn_bgs2 display  M-T8" v-if="selectIndex==0"></view>
								</view>
							</view>
							<view class="right display " :class="{fn_right1:selectIndex==1,fn_right2:selectIndex!=1}"
								@click="selectIndex=1">
								<view class="display width-100 displayColumn fn_span_1  all_item">
									<span class="fontSize font_comm fn_bg1"
										:style="{'font-weight':selectIndex==1 ? '600' :'400' ,color:selectIndex==1 ?'#000' :' #72778A'}">加盟条件</span>
									<view class="fn_bgs2 display  M-T8" v-if="selectIndex==1"></view>
								</view>
							</view>
						</view>
						<!-- 公司介绍 -->
						<block v-if="selectIndex==0">
							<!-- 图片 -->
							<view class="fn_items_card_two display width-699  all_item">
								<image class="img2" :src="imgsList.img2" mode=""></image>
							</view>
							<!-- 公司介绍 -->
							<view class="fn_gongsijiesao display  width-699  all_item displayColumn">
								<view class="fn_gongsijiesao_one display   M-T36">
									<image class="imgs1" :src="imgsList.imgLeft" mode=""></image>
									<span class="fontSize font_comm fn_txt1">公司介绍</span>
									<image class="imgs1" :src="imgsList.imgRight" mode=""></image>
								</view>
								<view class="fn_neirong display  M-T20">
									<text class="wode_trea">阿斯顿那阿松大受打击啊实打实毕竟大家按时阿贾克斯的不能接受阿就卡死你的阿萨健康大数据案件大神巨大撒打算的教案设计大街上的啊实打实的</text>
								</view>
							
							</view>
							<!-- 摩卡优势 -->
							<view class="fn_youshi display  width-699 all_item displayColumn">
								<view class="fn_gongsijiesao_one display   M-T36">
									<image class="imgs1" :src="imgsList.imgLeft" mode=""></image>
									<span class="fontSize font_comm fn_txt1">摩卡优势</span>
									<image class="imgs1" :src="imgsList.imgRight" mode=""></image>
								</view>
								<view class="imgs12 display  " style="margin-top: 38rpx;"></view>
								<view class="imgs12 display  " style="margin-top: 38rpx;"></view>
								<view class="imgs12 display  " style="margin-top: 38rpx;"></view>
								<view class="imgs12 display  " style="margin-top: 38rpx;"></view>
							</view>
							
						</block>
						<!-- 加盟条件 -->
						<block v-if="selectIndex==1">
							<!-- 四张图片 -->
							<view class="four_img_one display  M-L24 M-T20 displayColumn displayColumn fontSize font_comm">
								<span class="fn_tttr1 M-T24 M-L24">加盟政策</span>
								<span class="fn_tttr2 M-L24 M-T16">减免管理费</span>
							</view>
							<view class="four_img_one display  M-L24 M-T20 displayColumn displayColumn fontSize font_comm">
								<span class="fn_tttr1 M-T24 M-L24">流量推荐</span>
								<span class="fn_tttr2 M-L24 M-T16">新商家推流保护</span>
							</view>
							<view class="four_img_one display  M-L24 M-T20 displayColumn displayColumn fontSize font_comm">
								<span class="fn_tttr1 M-T24 M-L24">限时返费</span>
								<span class="fn_tttr2 M-L24 M-T16">规定时间入驻反加盟费</span>
							</view>
							<!-- 费用类目 -->
							<view class="feeleimu display  width-100 displayColumn all_item fontSize font_comm M-T36">
								<view class="fn_feeleimu display  displayColumn ">
									<view class="fn_feeleimu_item display  width-100 displaycenter_aliem" >
										<span class="fn_rtn1 M-L24" >费用类目</span>
										<span class="fn_rtn2 M-R24">费用类目</span>
									</view>
									<view class="fn_feeleimu_item1 display  width-100 displaycenter_aliem" >
										<span class="fn_rtn1 M-L24" >加盟费</span>
										<span class="fn_rtn2 M-R24">10W</span>
									</view>
									<view class="fn_feeleimu_item display  width-100 displaycenter_aliem" >
										<span class="fn_rtn1 M-L24" >保证金</span>
										<span class="fn_rtn2 M-R24">2W~20W</span>
									</view>
									<view class="fn_feeleimu_item1 display  width-100 displaycenter_aliem" >
										<span class="fn_rtn1 M-L24" >其他</span>
										<span class="fn_rtn2 M-R24"></span>
									</view>
								</view>
							</view>
							<!-- 加盟说明 -->
							<view class="jiamengshuoming display  width-699 all_item displayColumn">
								<view class="fn_gongsijiesao_one display   M-T36">
									<image class="imgs1" :src="imgsList.imgLeft" mode=""></image>
									<span class="fontSize font_comm fn_txt1">加盟说明</span>
									<image class="imgs1" :src="imgsList.imgRight" mode=""></image>
								</view>
								<view class="fn_neirong display  M-T20">
									<text class="wode_trea">阿斯顿那阿松大受打击啊实打实毕竟大家按时阿贾克斯的不能接受阿就卡死你的阿萨健康大数据案件大神巨大撒打算的教案设计大街上的啊实打实的</text>
								</view>
							</view>
							
						</block>
						
						
					</view>
				</view>
				<!-- 按钮 -->
				<view class="fn_btns width_750 " :style="{top:selectIndex==0?'2000rpx':'1500rpx'}">
					<button class="btn display  all_item width-699 fontSize font_comm" @click="invite">加盟申请</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectIndex: 0,
				imgsList: {
					img1: this.$imgUrls + '2024/11/14/8edca3359158479a8c20649cf7e30aee.png',
					img2: this.$imgUrls + '2024/11/14/4940781afb8a4b0697f5bf47e7e680da.png',
					imgLeft: this.$imgUrls + '2024/11/14/540ba8615fb64f3b862bbac4a3f5d551.png',
					imgRight: this.$imgUrls + '2024/11/14/50c8892599d8432c8c9e48ca47509c5c.png'
				}
			}
		},
		methods:{
			// 加盟申请
			invite(){
				this.$tab.navigateTo('/packageC/franchiseapplication/franchiseapplication')
			}
		}
	}
</script>

<style scoped lang="scss">
	.title {
		font-weight: 600;
		font-size: 34rpx;
		color: #232323;

	}

	.fn_one {

		min-height: 702rpx;
		background: linear-gradient(180deg, #2373CA 0%, #F4F5FA 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.img1 {
		width: 362rpx;
		height: 50rpx;
	}

	.fn_tttx1 {
		font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
		font-weight: normal;
		font-size: 40rpx;
		color: #FFFFFF;
	}

	.fn_contents1 {

		position: relative;
		top: 36rpx;

	}

	.fn_items {
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0);
		// min-height: 1214rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		border: 2rpx solid #FFFFFF;
		padding-bottom: 12rpx;
	}

	.left {
		flex: 1;
		height: 100%;
		background: url('http://mkxd-app.oss-cn-beijing.aliyuncs.com/2024/11/14/fa56ed0a5b954fc8aed67084747aa5b6.png') no-repeat;
		background-size: 100%;
	}

	.fn_left1 {
		flex: 1;
		height: 100%;
		border-radius: 40rpx 0 0 0;
		background: #fff;
	}

	.fn_left2 {
		flex: 1;
		height: 100%;

		background: url('http://mkxd-app.oss-cn-beijing.aliyuncs.com/2024/11/14/fa56ed0a5b954fc8aed67084747aa5b6.png') no-repeat;
		background-size: 100%;
	}

	.right {
		flex: 1;
		height: 100%;

		background: url('http://mkxd-app.oss-cn-beijing.aliyuncs.com/2024/11/14/48adf59c4ef444f6bfa606bffce78615.png') no-repeat;
		background-size: 100%;
	}

	.fn_right1 {
		flex: 1;
		height: 100%;
		border-radius: 0 40rpx 0 0;
		background: #fff;
	}

	.fn_right2 {
		flex: 1;
		height: 100%;

		background: url('http://mkxd-app.oss-cn-beijing.aliyuncs.com/2024/11/14/48adf59c4ef444f6bfa606bffce78615.png') no-repeat;
		background-size: 100%;
	}

	.fn_items_card_one {
		height: 104rpx;
	}

	.fn_span_1 {
		height: 65%;
	}

	.fn_bgs2 {
		width: 48rpx;
		height: 8rpx;
		background: #126BC9;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}

	.fn_bg1 {
		// font-weight: 600;
		font-size: 28rpx;
		// color: #000000;
	}
	.img2 {
		width: 642rpx;
		height: 300rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.imgs1 {
		width: 100rpx;
		height: 23rpx;
	}
	.fn_txt1 {
		font-weight: 600;
		font-size: 28rpx;
		color: #212121;
	}
	.fn_neirong {
		width: 642rpx;
		min-height: 204rpx;
		text-indent: 24rpx;
	}
	.imgs12 {
		width: 642rpx;
		height: 240rpx;
		border-radius: 24rpx;
		background: url('http://mkxd-app.oss-cn-beijing.aliyuncs.com/2024/11/14/4940781afb8a4b0697f5bf47e7e680da.png') no-repeat;
		background-size: 100%;
	}

	.wode_trea {
		display: flex;
		align-items: center;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 10000;
		/** 显示的行数 **/
		font-weight: 400;
		font-size: 24rpx;
		color: #000000;
		font-family: PingFang SC, PingFang SC;
	}

	.fn_btns {
		height: 66rpx;
		position: absolute;
		
		padding-bottom: 140rpx;
	}

	.btn {
		width: 690rpx;
		height: 66rpx;
		background: #126BC9;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-weight: 600;
		font-size: 24rpx;
		color: #FFFFFF;
	}
	.four_img_one{
		align-items: flex-start;
		width: 642rpx;
		height: 138rpx;
		background: rgba(0,0,0,0.2);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		background: url('http://mkxd-app.oss-cn-beijing.aliyuncs.com/2024/11/14/4940781afb8a4b0697f5bf47e7e680da.png') no-repeat;
		background-size: 100%;
	}
	.fn_tttr1{
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
	}
	.fn_tttr2{
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
	}
	.fn_feeleimu{
		// width: 642rpx;
		// height: 296rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #DDDDDD;
	}
	.fn_feeleimu_item{
		width: 642rpx;
		height: 74rpx;
		background: rgba(18,107,201,0.1);
		
		// opacity: 0.1;
		justify-content: space-between;
	}
	.fn_feeleimu_item1{
		width: 642rpx;
		height: 74rpx;
		background: rgba(255,255,255,1);
		
		// opacity: 0.1;
		justify-content: space-between;
	}
	.fn_rtn1{
		font-weight: 400;
		font-size: 24rpx;
		color: #000000;
		
	}
	.fn_rtn2{
		font-weight: 600;
		font-size: 24rpx;
		color: #000000;
	}
</style>